<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>语音合成示例</title>
  </head>
  <body>
    <h1>语音合成示例</h1>
    <article id="inputArticle" contenteditable="true">你好啊啊&nbsp;啊</article>
    <button id="readButton">朗读</button>

    <script>
      const synth = window.speechSynthesis;
      const inputArticle = document.querySelector("#inputArticle");
      const readButton = document.querySelector("#readButton");
      
      readButton.addEventListener("click", () => {
        const utterThis = new SpeechSynthesisUtterance(inputArticle.textContent);
        const voices = synth.getVoices();
        if (voices.length >= 67) {
          utterThis.voice = voices[66];
        } else {
          console.error("无法选择第66个语音对象。");
        }
        synth.speak(utterThis);
        inputTxt.blur();
      });
    </script>
  </body>
</html>
